<script setup>
import { dutyGetTimeServe, dutyGetWorkTimePeopleServe } from '@/api/duty'
import { personGetServe } from '@/api/person'
import { filterArray, splitArrayEvenly } from '@/utils/dutyListChange'
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { useFormatStore } from '@/stores'
import { storeToRefs } from 'pinia'

///*获取值班表格式*/
const formatStore = useFormatStore()
const { format, columnLabels } = storeToRefs(formatStore)
////*空闲时间表*/////
const drawerVisible = ref(false)
//是否是查个人
const individualFlag = ref(false)
const search = ref({ day: 0, schedule: 0 })
//按时段查
const nameList = ref([])
const onShowByTime = async (day, schedule) => {
  search.value.day = day
  search.value.schedule = schedule
  const res = await dutyGetWorkTimePeopleServe(search.value)
  nameList.value = splitArrayEvenly(res, 5)
}
//按人查
//时段
const dutySelectList = ref([])
const searchPer = ref({ pagesize: 20, pagenum: 1, status: 1 })
const searchPerName = ref('')
const totalPer = ref(0)
const pageChangePer = (p) => {
  dutySelectList.value = []
  searchXY.value = { x: 0, y: 0 }
  searchPer.value.pagenum = p
  if (searchPerName.value !== '') searchName()
  else getNameList()
}
//人名列表
const allNameList = ref([])
//查人
const getNameList = async () => {
  if (searchPerName.value == '') {
    const res = await personGetServe(searchPer.value)
    totalPer.value = res.total
    allNameList.value = filterArray(res.record, 5)
  }
}
//点击人查时段
const searchXY = ref({ x: 0, y: 0 })
const onShowById = async (stu_id, x, y) => {
  searchXY.value.x = x
  searchXY.value.y = y
  const res = await dutyGetTimeServe({ stu_id: stu_id })
  dutySelectList.value = res.record
  ElMessage.success({ message: '获取成功', offset: 70 })
}
//搜索人名查时段
const searchName = async () => {
  dutySelectList.value = []
  searchPer.value.pagenum = 1
  const res = await personGetServe({
    ...searchPer.value,
    name: searchPerName.value
  })
  totalPer.value = res.total
  allNameList.value = filterArray(res.record, 5)
  onShowById(allNameList.value[0][0]?.stu_id, 1, 1)
}
const reSetSearchName = () => {
  searchXY.value.x = 0
  searchXY.value.y = 0
  dutySelectList.value = []
  searchPerName.value = ''
  searchPer.value.pagenum = 1
  getNameList()
}
//监听是否是个人
watch(individualFlag, (newValue) => {
  if (newValue && !allNameList.value[0]) {
    getNameList()
  }
})
//打开空闲时间表
const onShowSchedule = () => {
  dutySelectList.value = []
  nameList.value = []
  individualFlag.value = false
  search.value = { day: 0, schedule: 0 }
  searchXY.value = { x: 0, y: 0 }
  searchPerName.value = ''
  drawerVisible.value = true
}
defineExpose({ onShowSchedule })
</script>

<template>
  <el-drawer v-model="drawerVisible" title="空闲时间表" direction="rtl" size="60%">
    <div>
      <el-switch v-model="individualFlag" size="large" active-text="个人" inactive-text="全部" />
    </div>
    <div style="margin-top: 5px">
      <el-table :data="format" style="width: 100%" border>
        <!-- 表左边 -->
        <el-table-column label="时间" prop="" width="120px" align="center">
          <template #default="{ row }">
            <div>{{ row.start + '-' }}{{ row.end }}</div>
          </template>
        </el-table-column>
        <!-- 主体 -->
        <el-table-column
          v-for="(label, index) in columnLabels"
          :key="index"
          :label="label"
          align="center"
        >
          <template v-slot="scope">
            <!-- 个人 -->
            <div
              v-if="individualFlag"
              :style="{
                color: dutySelectList[index * 5 + scope.$index] === 1 ? '#409EFF' : ''
              }"
            >
              {{ dutySelectList[index * 5 + scope.$index] === 1 ? '空闲' : '' }}
            </div>
            <!-- 时段 -->
            <div v-else>
              <el-button
                size="default"
                :style="{
                  backgroundColor:
                    index == search.day - 1 && scope.$index == search.schedule - 1 ? '#D3F0FF' : ''
                }"
                @click="onShowByTime(index + 1, scope.$index + 1)"
              >
                查看
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 名字显示 -->
      <!-- 全 -->
      <el-table
        v-if="!individualFlag"
        :data="nameList[0]"
        style="width: 100%; height: 230px; margin-top: 10px"
        border
      >
        <el-table-column prop="" align="center" v-for="(arr, index) in nameList" :key="index">
          <template #header>
            <span style="color: #000">{{
              index == 0
                ? '该时段空闲人员'
                : index == 1
                  ? `${columnLabels[search.day - 1]}`
                  : index == 2
                    ? `${format[search.schedule - 1]?.start}-` +
                      `${format[search.schedule - 1]?.end}`
                    : ''
            }}</span>
          </template>
          <template v-slot="scope">
            <button
              class="span_name"
              v-if="arr[scope.$index]"
              @click="
                () => {
                  searchPerName = arr[scope.$index]?.name
                  individualFlag = true
                  searchName()
                }
              "
            >
              {{ arr[scope.$index]?.name }}
            </button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 个人 -->
      <div v-if="individualFlag">
        <el-form v-if="individualFlag" inline style="margin-top: 10px">
          <el-form-item>
            <el-input v-model="searchPerName" placeholder="输入名字查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="default" @click="searchName" :icon="Search">
              查询
            </el-button>
            <el-button type="primary" size="default" @click="reSetSearchName" :icon="Refresh">
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-if="individualFlag"
          :showHeader="false"
          :data="allNameList[0]"
          style="width: 100%"
          border
        >
          <el-table-column align="center" v-for="(arr, index) in allNameList" :key="index">
            <template v-slot="scope">
              <button
                v-if="arr[scope.$index]"
                class="span_name"
                @click="onShowById(arr[scope.$index]?.stu_id, index + 1, scope.$index + 1)"
                :style="{
                  backgroundColor:
                    index == searchXY.x - 1 && scope.$index == searchXY.y - 1 ? '#D3F0FF' : ''
                }"
              >
                {{ arr[scope.$index]?.name }}
              </button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="individualFlag"
          v-model:current-page="searchPer.pagenum"
          v-model:page-size="searchPer.pageSize"
          :background="true"
          layout="total, prev, pager, next"
          :total="totalPer"
          style="margin-top: 10px; justify-content: flex-end"
          @current-change="pageChangePer"
        />
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.span_name {
  border: none;
  background-color: #ffffff;
  width: 100%;
  display: block;
  font-size: medium;
}

.span_name:hover {
  background: #eaf1fe;
  color: #377cfc;
}
</style>
